<template>
  <div class="withdraw-info">
      <div class="container">
          <div class="info-title text-overflow">平台提现信息</div>
          <el-row :gutter="10" style="padding:20px 10px;border-bottom:1px solid #efefef;">
            <el-col span="4">
              <el-date-picker
                  class="filter-select"
                  v-model="filters.startTime"
                  align="right"
                  type="date"
                  size="small"
                  placeholder="选择开始日期"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd"
                  :picker-options="pickerOptions">
                </el-date-picker>
            </el-col>
            <el-col span="4">
              <el-date-picker
                  class="filter-select"
                  v-model="filters.endTime"
                  align="right"
                  type="date"
                  size="small"
                  placeholder="选择结束日期"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd">
                </el-date-picker>
            </el-col>
            <el-col span="4">
              <el-input prefix-icon="el-icon-search" class="filter-input" clearable v-model="filters.merchantNo" placeholder="订单号查询查询"></el-input>
            </el-col>
            <el-col span="4">
              <el-select class="filter-select"  v-model="filters.payStatus" clearable placeholder="状态">
                  <el-option
                    v-for="item in statusList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
            </el-col>
            <el-col span="4">
               <el-button style="width:120px" @click="queryByFilters(0)">查询</el-button>
            </el-col>
          </el-row>

          <!-- 列表 -->
          <div class="trading-info-list" v-loading="loading" style="width: 100%">
              <div class="trading-list">
                <el-table
                  :data="list"
                  style="width: 100%">
                  <el-table-column
                    type="index"
                    width="50">
                  </el-table-column>
                  <el-table-column
                    v-for="cell in list_header" :key="cell.prop"
                    :prop="cell.prop"
                    :label="cell.label"
                    :formatter = formatterList
                    >
                  </el-table-column>
                 </el-table>

              </div>
              <div class="pages-control">
                  <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page.sync="pages.currentPage"
                    :page-size="pages.page_size"
                    layout="prev, pager, next, jumper"
                    :total="pages.total">
                  </el-pagination>
              </div>
          </div>
      </div>
  </div>
</template>

<script>

function formatterAmount(value){
   return `￥${value || 0}`;
}
function formatterRate(value){
   return (value*100).toFixed(2) + "%";
}
function formatterStatus(value){
    if(value == "0"){
        return "支付中";
    }else if(value == "1"){
        return "成功";
    }else if(value == "2"){
        return  "失败";
    }else if(value == "3"){
        return  "未知";
    }else if(value == "4"){
        return  "待确认";
    }else{
       return '未知状态'+value
    }
}
export default {
  name:'withdraw-info',
  data () {
    return {
         loading:false, 
        filters:{ // 需要查询数据库
           bankCardNo:null,
           payStatus:null,
           endTime:null,
           startTime:null,
           merchantNo:null         
        },
        list:[],
        list_header:[
            {prop:"createTime",label:"交易时间"},
            { prop: "requestNo", label: "订单流水号" },
            {prop:"merchantNo",label:"商户订单号"},
            {prop:"rate",label:"刷卡费率"},
            {prop:"amount",label:"实际金额"},
            {prop:"inAmount",label:"用户输入金额"},
            {prop:"bankName",label:"银行名称"},
            {prop:"bankAccountName",label:"用户姓名"},
            {prop:"payStatus",label:"状态"},
        ],
        statusList:[
          {value:"0",label:"支付中"},
          {value:"1",label:"成功"},
          {value:"2",label:"失败"},
          {value:"3",label:"未知"},
          {value:"4",label:"待确认"},
        ],
    
         pages:{
          total:10000,
          page_size:20,
          currentPage:1
        },
         pickerOptions:{
            disabledDate(time) {
              return time.getTime() > Date.now();
            },
            shortcuts: [{
              text: '今天',
              onClick(picker) {
                picker.$emit('pick', new Date());
              }
            }, {
              text: '昨天',
              onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24);
                picker.$emit('pick', date);
              }
            }, {
              text: '一周前',
              onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', date);
              }
            }]
      }
    };
  },
  components: {},
  created() {
      this.queryByFilters(0);
  },
  mounted() {},
  methods: {
      queryByFilters(page=0){
        this.loading = true;
        let params = `size=${this.pages.page_size}&page=${page}`;
        ['payStatus','endTime','startTime','merchantNo'].forEach(element => {
            if(this.filters[element]!== null && this.filters[element]!==''){
                params+=`&${element}=${this.filters[element]}`
            }
        });     
        this.$Http.post('paymentchannel/freeQuick/findFreeQuickWithdrawPage',params).then(res=>{
            this.loading = false;
            if(res.data.resp_code === "000000"){         
                this.list = res.data.result.content;
                this.pages.total = res.data.result.totalElements;
            }else{
                this.$notify.info({
                title: '消息',
                message: res.data.resp_message
                }); 
            } 
            }).catch(err=>{
                this.loading = false;
                this.$notify.error({
                title: '错误',
                message: '获取信息失败！'
                });
            });
      },
      handleCurrentChange(page){
        this.queryByFilters(page-1);
      },
      formatterList(row, column, cellValue, index){
        //  格式化信息
        if(column.label === "状态"){
            return formatterStatus(cellValue)
        }else if(column.label === "用户输入金额" || column.label === "实际金额"){
            return formatterAmount(cellValue)
        }else if(column.label ==="刷卡费率"){
            return formatterRate(cellValue)
        }else{
            return  cellValue;
        }
        
      },
  }
}

</script>
<style scoped>
.withdraw-info{
    padding: 20px;
    box-sizing: border-box;
}
.container{
  border: 1px solid #ededed;
}
.info-title{
  height: 50px;
  line-height: 50px;
  font-size: 26px;
  color: #409eff;
  padding: 5px 20px;
  border-bottom: 1px solid #ededed;
}
.filter-input,.filter-select{
  width: 160px;
  margin-right: 10px;
}
.filter-box{
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 15px;
  flex-wrap: nowrap;
  overflow: hidden;
}

.member-count{
  height: 30px;
  text-align: left;
  line-height: 30px;
  border-bottom: 1px solid #ededed;
  border-top: 1px solid #ededed;
  padding: 5px 20px;
}

.trading-list{
  min-height: 300px;
  position: relative;
}
.pages-control{
  border-top: 1px solid #ededed;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.filter-by-date{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
}
.el-input__icon{
  cursor: pointer;
}

</style>